﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true" CodeBehind="SoSanh.aspx.cs" Inherits="IMark.SoSanh" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script src="js/kendo.all.min.js"></script>
    <link href="css/kendo.common.min.css" rel="stylesheet" />
    <link href="css/kendo.metro.min.css" rel="stylesheet" />
    <style type="text/css">
        .imgSoSanh
        {
            width:200px;
        }
        .borleft{
            border-left:1px solid #EEE;
        }
        .bortop{
            border-top:1px solid #EEE;
        }
        .name{
            margin: 0;
padding: 0 0 10px 0;
font-size: 20px;
font-weight: 400;
        }
        .k-list-container,.k-input
        {
            color: #949494;
        }
        .fa-star,.fa-star-o{
            color:#ED3535
        }
        .k-header,.k-link{
            color:#000 !important;
            font-weight: bold !important;
        }
        a:visited{
            color:#333333;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="row clearfix f-space10"></div>
    <div class="container">
        <div class="row" style="margin:0px">
            <table style="width:100%;vertical-align:top">
                <tr>
                    <td style="width:20%">
                    </td>
                    <td style="width:40%;text-align:center" class="borleft">
                        <asp:Image ID="imgSP1" runat="server" ImageUrl="~/images/products/Canon-5D-MarkIII-1.jpg" CssClass="imgSoSanh" />
                        <br />
                        <asp:Label ID="lblTenSP1" runat="server" CssClass="name"></asp:Label>
                    </td>
                    <td style="width:40%;text-align:center;vertical-align:top" class="borleft">
                        <input id="cboSP" style="width:100%" />
                        <%--<asp:Image ID="imgSP2" runat="server"  CssClass="imgSoSanh"  />--%>
                        <img id="imgSP2" class="imgSoSanh" />
                        <br />
                        <label id="lblTenSP2" class="name"></label>
                    </td>
                </tr>
                <tr class="bortop">
                    <td style="width:20%">
                        <b>ĐÁNH GIÁ</b>
                    </td>
                    <td class="borleft">
                        <asp:Label ID="lblDanhGia1" runat="server" CssClass="name"></asp:Label>
                    </td>
                    <td class="borleft">
                        <label id="lblDanhGia2"></label>
                    </td>
                </tr>
                <tr class="bortop">
                    <td style="width:20%">
                        <b>GIÁ THÀNH</b>
                    </td>
                    <td class="borleft">
                        <asp:Label ID="lblGiaThanh1" runat="server" CssClass="name"></asp:Label>
                    </td>
                    <td class="borleft">
                        <label id="lblGiaThanh2" class="name"></label>
                    </td>
                </tr>
                <tr class="bortop">
                    <td style="width:20%">
                        <b>GIẢM GIÁ</b>
                    </td>
                    <td class="borleft">
                        <asp:Label ID="lblGiamGia1" runat="server" CssClass="name"></asp:Label>
                    </td>
                    <td class="borleft">
                        <label id="lblGiamGia2" class="name"></label>
                    </td>
                </tr>
                <tr class="bortop">
                    <td style="width:20%">
                        <b>THƯƠNG HIỆU</b>
                    </td>
                    <td class="borleft">
                        <asp:Label ID="lblThuongHieu1" runat="server" CssClass="name"></asp:Label>
                    </td>
                    <td class="borleft">
                        <label id="lblThuongHieu2" class="name"></label>
                    </td>
                </tr>
                <tr class="bortop">
                    <td style="width:20%;vertical-align:top">
                        <b>ĐẶC ĐIỂM NỔI BẬT</b>
                    </td>
                    <td class="borleft" style="vertical-align:top">
                        <asp:Label ID="lblDacDiemNoiBat1" runat="server" CssClass="name"></asp:Label>
                    </td>
                    <td class="borleft" style="vertical-align:top">
                        <label id="lblDacDiemNoiBat2" class="name"></label>
                    </td>
                </tr>
                <tr class="bortop">
                    <td style="width:20%;vertical-align:top">
                        
                    </td>
                    <td class="borleft" style="vertical-align:top">
                        <div class="product-details">
                            <div class="product-big-btns">
                                <button class="btn btn-addtocart" onclick="ThemVaoGioHang(<%=IDLoaiSP%>)"> <i class="fa fa-shopping-cart fa-fw"></i> Đặt Hàng </button>
                            </div>
                        </div>
                        
                    </td>
                    <td class="borleft" style="vertical-align:top">
                        <div class="product-details">
                            <div class="product-big-btns" id="btnDatHang2">
                                
                            </div>
                        </div>
                    </td>
                </tr>
                <tr class="bortop">
                    <td style="width:20%;vertical-align:top">
                        <b>SẢN PHẨM XEM GẦN ĐÂY</b>
                    </td>
                    <td colspan="2" class="borleft" style="vertical-align:top">
                        <div id="grvRecently"></div>
                    </td>
                    
                </tr>
            </table>

            
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            
            var LoaiID = '<%=IDLoaiSP%>';
            $.ajax({
                url:"http://" + location.host + "/eMartSer/eMartServices.svc/LaySanPhamTheoLoai/" + LoaiID,
                success:function(data)
                {
                    $("#cboSP").kendoComboBox({
                        dataTextField: "TenSanPham",
                        dataValueField: "ID",
                        filter: "contains",
                        suggest: true,
                        dataSource: data,
                        select: onSelect,
                        placeholder:"Chọn sản phẩm để so sánh"
                    });
                }
            })

            if (localStorage.Recently != null)
            {
                var SPGanDay = JSON.parse(localStorage.Recently);
                $("#grvRecently").kendoGrid({
                    dataSource: SPGanDay,
                    scrollable: false,
                    sortable: true,
                    columns: [
                            { field: "TenSP", title: "Tên Sản Phẩm", template: "<div><a href='ChiTietSP.aspx?ID=#=data.ID#'>#=data.TenSP#<a></div>" },
                            { field: "DonGia", title: "Đơn Giá (vnđ)", format: "{0:n0}",type:"number"  },
                    ],
                    pageable: true
                })
            }
                
        })

        function onSelect(e) {
            var dataItem = this.dataItem(e.item.index());
            $.ajax({
                url: "http://" + location.host + "/eMartSer/eMartServices.svc/LaySanPhamTheoID/" + dataItem.ID,
                success: function (data) {
                    $("#imgSP2").attr("src", "/images/products/" + dataItem.HINH_SAN_PHAM[0].Hinh);
                    $("#lblTenSP2").text(dataItem.TenSanPham);
                    $("#lblGiaThanh2").text(CachThapPham(dataItem.DonGia) + "đ");
                    if (dataItem.NgayBatDau != null && dataItem.NgayKetThuc != null) {
                        var a = dataItem.NgayBatDau;
                        a = a.substr(6, a.length - 13);
                        var b = dataItem.NgayKetThuc;
                        b = b.substr(6, b.length - 13);
                        if (new Date(parseInt(a)) <= new Date() && new Date(parseInt(b)) >= new Date()) {
                            $("#lblGiamGia2").text(CachThapPham(dataItem.DonGia * dataItem.GiamGia / 100) + "đ");
                        }
                        else { $("#lblGiamGia2").text("Không Giảm Giá !!!") }
                    }
                    else { $("#lblGiamGia2").text("Không Giảm Giá !!!") }
                    $("#lblThuongHieu2").text(dataItem.ThuongHieu);
                    $("#lblDacDiemNoiBat2").html(dataItem.MoTaTomTat);
                    $("#btnDatHang2").html('<button class="btn btn-addtocart" onclick="ThemVaoGioHang('+dataItem.ID+')"> <i class="fa fa-shopping-cart fa-fw"></i> Đặt Hàng </button>')

                }
            });
            $.ajax({
                url: "http://" + location.host + "/eMartSer/eMartServices.svc/SoSaoTheoIDSP/" + dataItem.ID,
                success:function(data)
                {
                    $("#lblDanhGia2").html(data);
                }
            })
            
        };

        function CachThapPham(So)
        {
            var result ="";
            var count = 0;
            So = So.toString();
            So = So.split("");
            
            for (var i = (So.length) - 1; i > -1 ; i--) {
                
                if(count==3)
                {
                    result = "," + result;
                    result = So[i] + result;
                    count = 1;
                }
                else
                {
                    result = So[i] + result;
                    count += 1;
                }
            }
            return result;
        }

        TinhSoSao = function(DanhGia)
        {
            var tongdanhgia = 0;
            var tongsosao = 0;
            var sao = 0;
            var html = "";
            for (var i = 0; i < DanhGia.length; i++) {
                if(DanhGia[i].SoSao!=0)
                {
                    tongdanhgia += 1;
                    tongsosao += DanhGia[i].SoSao;
                }
            }

            if(tongdanhgia>0&& tongsosao>0)
            {
                sao = Math.Round((tongsosao / tongdanhgia));
                html = GenerateRating(sao);
            }
            return html;
        }

        GenerateRating = function (sosao)
        {
            html += '<div class="rating">';
            for (var i = 0; i < sosao; i++) {
                html += '<i class="fa fa-star"></i>';
            }
            for (var i = 0; i < 5 - sosao; i++) {
                html += '<i class="fa fa-star-o"></i>';
            }
            html += '</div>';
        }
    </script>
</asp:Content>
